<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<link rel="stylesheet" href="../layui/css/layui.css" media="all">

	<script src="../layui/layui.js" charset="utf-8"></script>
	<!-- <script src="../lib/layui/layui.js"></script> -->
	<!-- <link href="../lib/layui/css/layui.css" type="text/css" rel="stylesheet" media="all"> -->
	<script src="../js/jquery-3.3.1.min.js"></script>

	<body>
		<table class="layui-hide" id="test" lay-filter="test"></table>

		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
		 <button class="layui-btn layui-btn-sm" lay-event="del" id="deel">删除</button>
		 <div class="layui-container">
		   <div class="layui-row layui-col-space10">
		     <div class="layui-col-xs12" style="margin-top: 10px;">
		       <div class="layui-form">
		         <div class="layui-form-item">
		           <label class="layui-form-label">是否跨页记录</label>
		           <div class="layui-input-inline">
		             <input type="checkbox" name="status" lay-skin="switch" checked="checked" lay-filter="statusSwitch">
		           </div>
		            </div>
		             </div>
		           </div>
		           </div>
		           </div>
				   
		 
  </div>
  
 
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
		GGGG: <a href="javascript:;" data-page="2" class="layui-laypage-refresh"><i class="layui-icon layui-icon-refresh"></i></a>

		<script>
		
			data = [{
					"id": 10000,
					"username": "user-0",
					"sex": "女",
					"city": "城市-0",
					"sign": "签名-0",
					"experience": 255,
					"logins": 24,
					"wealth": 82830700,
					"classify": "作家",
					"score": 57
				}, {
					"id": 10001,
					"username": "user-1",
					"sex": "男",
					"city": "城市-1",
					"sign": "签名-1",
					"experience": 884,
					"logins": 58,
					"wealth": 64928690,
					"classify": "词人",
					"score": 27
				}, {
					"id": 10002,
					"username": "user-2",
					"sex": "女",
					"city": "城市-2",
					"sign": "签名-2",
					"experience": 650,
					"logins": 77,
					"wealth": 6298078,
					"classify": "酱油",
					"score": 31
				}, {
					"id": 10003,
					"username": "user-3",
					"sex": "女",
					"city": "城市-3",
					"sign": "签名-3",
					"experience": 362,
					"logins": 157,
					"wealth": 37117017,
					"classify": "诗人",
					"score": 68
				}, {
					"id": 10004,
					"username": "user-4",
					"sex": "男",
					"city": "城市-4",
					"sign": "签名-4",
					"experience": 807,
					"logins": 51,
					"wealth": 76263262,
					"classify": "作家",
					"score": 6
				}, {
					"id": 10005,
					"username": "",
					"sex": "女",
					"city": "城市-5",
					"sign": "签名-5",
					"experience": 173,
					"logins": 68,
					"wealth": 60344147,
					"classify": "作家",
					"score": 87
				}, {
					"id": 10006,
					"username": "user-6",
					"sex": "女",
					"city": "城市-6",
					"sign": "签名-6",
					"experience": 982,
					"logins": 37,
					"wealth": 57768166,
					"classify": "作家",
					"score": 34
				}, {
					"id": 10007,
					"username": "user-7",
					"sex": "男",
					"city": "城市-7",
					"sign": "签名-7",
					"experience": 727,
					"logins": 150,
					"wealth": 82030578,
					"classify": "作家",
					"score": 28
				}, {
					"id": 10008,
					"username": "user-8",
					"sex": "男",
					"city": "城市-8",
					"sign": "签名-8",
					"experience": 951,
					"logins": 133,
					"wealth": 16503371,
					"classify": "词人",
					"score": 14
				}, {
					"id": 10009,
					"username": "user-9",
					"sex": "女",
					"city": "城市-9",
					"sign": "签名-9",
					"experience": 484,
					"logins": 25,
					"wealth": 86801934,
					"classify": "词人",
					"score": 75
				},
				{
					"id": 1155,
					"username": "user-1",
					"sex": "男",
					"city": "城市-1",
					"sign": "签名-1",
					"experience": 884,
					"logins": 58,
					"wealth": 64928690,
					"classify": "词人",
					"score": 27
					// ,"checked":true 默认全选
				}
			]
			layui.use('table', function() {
				var table = layui.table;
				// table =  $.extend(table, {config: {checkName: 'checked'}}) 默认全选
				table.render({
					elem: '#test',
					data: data,
					toolbar: '#toolbarDemo',
					title: '用户数据表',
					count: 11,
					limit: 3,
					limits: [10, 20, 30],
					layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
					initSort: {
						field: 'id' //排序字段，对应 cols 设定的各字段名
							,
						type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
					},
					cols: [
						[{
								type: 'checkbox',
								id: "ee",
								fixed: 'left',
								// LAY_CHECKED: true
							}, {
								field: 'id',
								title: 'ID',
								width: 80,
								fixed: 'left',
								unresize: true,
								sort: true,
								minWidth: 200,
								width: 120
							}, {
								field: 'username',
								title: '用户名',
								width: 120,
								edit: 'text'
							}

							, {
								field: 'sex',
								title: '性别',
								width: 80,
								edit: 'text',
								sort: true
							}, {
								field: 'city',
								title: '城市',
								width: 100,
								hide: true
							}, {
								field: 'sign',
								title: '签名',
								unresize: true
							}, {
								field: 'experience',
								title: '积分',
								width: 80,
								sort: true
							}

							, {
								field: 'logins',
								title: '登入次数',
								width: 100,
								sort: true
							}

							, {
								fixed: 'right',
								title: '操作',
								toolbar: '#barDemo',
								width: 150
							}
						]
					],
					page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
						layout: ['count', 'prev', 'page', 'next', 'limit', 'skip', "refresh"] //自定义分页布局
							,
						curr: 1 //设定初始在第 5 页
							,
						groups: 5 //只显示 1 个连续页码
							,
						first: true //不显示首页
							,
						last: true //不显示尾页

					},
 colFilterRecord: true,
					defaultToolbar: ['filter', 'print', 'exports']
				});

				//头工具栏事件
				table.on('toolbar(test)', function(obj) {
					// obj.config.limit = 11;
					// alert("f:"+data.length)
					for (var i in obj)
						console.log("obj:", i, " ", obj[i])
					var checkStatus = table.checkStatus(obj.config.id);
					for (var i in checkStatus)
						console.log("pp", i, " ", checkStatus[i])
					for (var i in data)
						console.log("pp22", i, " ", data[i])
					switch (obj.event) {
						case 'getCheckData':
							var data = checkStatus.data;

							console.log("getCheckData")
							layer.alert(JSON.stringify(data));
							break;
						case 'getCheckLength':
							// 		we=[{
							// 	"id": 10009,
							// 	"username": "user-9",
							// 	"sex": "女",
							// 	"city": "城市-9",
							// 	"sign": "签名-9",
							// 	"experience": 484,
							// 	"logins": 25,
							// 	"wealth": 86801934,
							// 	"classify": "词人",
							// 	"score": 75
							// 
							// }];
							// 		checkStatus.data=checkStatus.data.concat(we);
							var data = checkStatus.data;
							for (var i in checkStatus)
								console.log("i", i, " ", checkStatus[i])
							console.log("getCheckLength")
							layer.msg('选中了：' + data.length + ' 个');
							break;
						case 'isAll':
							console.log("isAll")
							layer.msg(checkStatus.isAll ? '全选' : '未全选');
							break;
							// case "del":
							// var quan=checkStatus.isAll;
							// alert("ff:"+quan+" "+checkStatus.data.length)
							// var data = checkStatus.data;
							// for(var u=0;u<data.length;u++){
							// 	console.log("u",u," ",data[u])
							// 	
							// }
							break;
					};
				});


				//监听行工具事件
				table.on('tool(test)', function(obj) {
					var data = obj.data;
					console.log("pp2:", data)
					if (obj.event === 'del') {
						// obj.del();
						layer.confirm('真的删除行么', function(index) {
							obj.del();
							layer.close(index);
							alert("g:" + index)

						});
						// 
					} else if (obj.event === 'edit') {
						// layer.prompt({
						//   formType: 2
						//   ,value: data.email
						// }, function(value, index){
						//   obj.update({
						//     email: value
						//   });
						// 
						//      layer.close(index);
						//    });
						layer.alert('编辑行：<br>' + JSON.stringify(data))
					}
				});

				//监听单元格编辑
				table.on('edit(test)', function(obj) {
					var value = obj.value //得到修改后的值
						,
						data = obj.data //得到所在行所有键值
						,
						field = obj.field; //得到字段
					layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
				});



				//监听表格复选框选择
				var checkedArr = [];
				// table.on('checkbox(test)', function(obj){
				// 	alert("gg:"+obj.type)
				// if (obj.type=='all') return;
				// if (obj.checked){
				// checkedArr[obj.data.id] = obj.data.LAY_TABLE_INDEX;for(var i in checkedArr)
				// 			console.log("checkedArr55:",i," ",checkedArr[i])
				// }
				// else{
				// delete checkedArr[obj.data.id];
				// for(var i in checkedArr)
				// 			console.log("checkedArr66:",i," ",checkedArr[i])
				// }
				// });


				//批量删除
				$("#deel").click(function() {
					for(var i in checkedArr)
							console.log("checkedArr44:",i," ",checkedArr[i])
					var checkStatus = table.checkStatus('test'),
						data = checkStatus.data,
						tmpArr = [],
						ids = [];
					if (checkStatus.isAll) {
						for (var i = 0; i < data.length; i++) {
							checkedArr[data[i].id] = i;
							ids.push(data[i].id);
						}
						for (var i in checkedArr)
							console.log("checkedArr:", i, " ", checkedArr[i])
						for (var i in ids)
							console.log("ids:", i, " ", ids[i])
					} else {
						for (var i = 0; i < data.length; i++) {
							tmpArr[data[i].id] = checkedArr[data[i].id];
							ids.push(data[i].id);
						}
						checkedArr = tmpArr;
						for (var i in tmpArr)
							console.log("tmpArr2:", i, " ", tmpArr[i])
						for (var i in ids)
							console.log("ids2:", i, " ", ids[i])
					}

					//没有选中任何一行
					if (checkedArr.length == 0) {
						layui.layer.msg('请选择要删除行');
						return;
					}

					layui.layer.confirm('真的删除么22', function(index) {
						layui.layer.close(index);
						//ajax从数据库删除 ids.toString();
						for (var i in checkedArr)
							console.log("checkedArr33:", i, " ", checkedArr[i])
						$.each(checkedArr, function(k) {
							$("tr[data-index=" + checkedArr[k] + "]").remove();
						});
						layui.layer.msg('删除成功');
					});

				});

			});

			// $("input[type='checkbox']").removeAttr("checked");
		</script>
	</body>
</html>
